<template>
	<div class="tab-item" @click="goRoute">
		<span :style="color">{{text}}<hr v-if="isActive"/></span>
	</div>
</template>

<script>
	export default{
		props:['path','text'],
		computed:{
			color(){
				return this.isActive?{"color":"red"}:{}
			},
			isActive(){
				return this.$route.path.includes(this.path)
			}
		},
		methods:{
			goRoute(){				
				this.$router.push(this.path)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-item{
		text-align: center;
		flex-grow: 1;
		font-size: vw(17);
		font-weight: 600;
		color: $color3;
	}
	.tab-item span{
		display: inline-block;
		// border-bottom: 2pt solid $color4;
	}
	hr{
		width: 86%;
		border: vw(1.1) solid $color4;	
	    background-color: $color4;
	}
</style>
